<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>组件实例的三大实例之state</title>
</head>
<body>
  <div id="root"></div>

  <script src="../js/react.development.js"></script>
  <script src="../js/react-dom.development.js"></script>
  <script src="../js/babel.min.js"></script>
  <script type="text/babel">
    // class Weather extends React.Component {
    //   // 构造器，创建实例时只调用一次
    //   constructor(props) {
    //     console.log('constructor')
    //     // 在使用this 之前必须先调用 super()，以首先调用父类构造函数
    //     super(props)
    //     // 1. state 必须为对象
    //     this.state = {
    //       isHot: true
    //     }
    //     // 所以这里需要重新绑定 this 指向为当前组件实例之后，函数里面的 this 才可使用
    //     this.changeWeather = this.changeWeather.bind(this)
    //   }
    //   changeWeather() {
    //     // 直接使用方法，方法中的 this 为 undefined
    //     // 由于 changeWeather 做为 onClick 的回调，所以不是通过实例来调用的，而是直接调用
    //     // 又由于类中的方法默认在局部开启了 严格模式，所以 changeWeather 中的 this 为 undefined
    //     console.log('class 方法中的 this：', this)
    //     // 严重注意：状态不可直接更改，要借用一个 API，setState
    //     this.setState({
    //       isHot: !this.state.isHot
    //     })
    //   }
    //   // render 调用 1+n 次，第一次是刚渲染时，之后每次修改状态时都会重新调用 render
    //   render() {
    //     console.log('render')
    //     // 可看出 this 是组件实例，且组件实例上有 state，props，和 refs
    //     console.log(this)
    //     return (
    //       <div>
    //         <h2>今天天气{ this.state.isHot ? '炎热' : '凉爽' }</h2>
    //         <button onClick={this.changeWeather}>切换天气</button>
    //       </div>
    //     )
    //   }
    // }

    
    // 简写，推荐
    class Weather extends React.Component {
      // 在实例对象上
      state = {
        isHot: true
      }
      // 在实例对象上
      // 箭头函数中没有this，内部this指向外部作用域的this，也就是组件实例对象
      changeWeather = ()=>{
        this.setState({
          isHot: !this.state.isHot
        })
      }
      render() {
        return (
          <div>
            <h2>今天天气{ this.state.isHot ? '炎热' : '凉爽' }</h2>
            <button onClick={this.changeWeather}>切换天气</button>
          </div>
        )
      }
    }
    ReactDOM.render(<Weather />, document.getElementById('root'))
  </script>
</body>
</html>